<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿里百秀-发现生活，发现美!</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.css">

  <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
  <script src="../assets/vendors/nprogress/nprogress.js"></script>

  <style>
    .swipe {
      width: 100%;
      height: 300px;
      overflow: hidden;
    }

    .swipe-wrapper {
      height: 100%;
    }
  </style>
</head>

<body>
  <script>NProgress.start()</script>
  <div class="wrapper">
    <div class="topnav">
      <ul>
        <li><a href="javascript:;"><i class="fa fa-glass"></i>奇趣事</a></li>
        <li><a href="javascript:;"><i class="fa fa-phone"></i>潮科技</a></li>
        <li><a href="list.html"><i class="fa fa-fire"></i>会生活</a></li>
        <li><a href="javascript:;"><i class="fa fa-gift"></i>美奇迹</a></li>
      </ul>
    </div>
    <div class="header">
      <h1 class="logo"><a href="index.html"><img src="assets/img/logo.png" alt=""></a></h1>
      <ul class="nav">
        <!-- <li><a href="javascript:;"><i class="fa fa-glass"></i>奇趣事</a></li>
            <li><a href="javascript:;"><i class="fa fa-phone"></i>潮科技</a></li>
            <li><a href="list.html"><i class="fa fa-fire"></i>会生活</a></li>
            <li><a href="javascript:;"><i class="fa fa-gift"></i>美奇迹</a></li> -->
      </ul>
      <div class="search">
        <form>
          <input type="text" class="keys" placeholder="输入关键字">
          <input type="submit" class="btn" value="搜索">
        </form>
      </div>
    </div>
    <div class="aside">
      <div class="widgets">
        <h4>搜索</h4>
        <div class="body search">
          <form>
            <input type="text" class="keys" placeholder="输入关键字">
            <input type="submit" class="btn" value="搜索">
          </form>
        </div>
      </div>
      <div class="widgets">
        <h4>随机推荐</h4>
        <ul class="body random">

        </ul>
      </div>
      <div class="widgets">
        <h4>最新评论</h4>
        <ul class="body discuz">
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_1.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_1.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_2.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_1.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_2.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="avatar">
                <img src="uploads/avatar_1.jpg" alt="">
              </div>
              <div class="txt">
                <p>
                  <span>鲜活</span>2020-02-01说:
                </p>
                <p>挺会玩的</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="swipe">
        <ul class="swipe-wrapper">

        </ul>
        <p class="cursor"><span class="active"></span><span></span><span></span><span></span></p>
        <a href="javascript:;" class="arrow prev"><i class="fa fa-chevron-left"></i></a>
        <a href="javascript:;" class="arrow next"><i class="fa fa-chevron-right"></i></a>
      </div>
      <div class="panel hots">
        <h3>热门推荐</h3>
        <ul id='hots'>

        </ul>
      </div>
      <div class="panel new" id='lasted'>


      </div>
    </div>
    <div class="footer">
      <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
    </div>
  </div>
  <script src="assets/vendors/jquery/jquery.js"></script>
  <script src="assets/vendors/swipe/swipe.js"></script>

  <script src="./assets/vendors/art-template/template-web.js"></script>
  <script>
    //
    var swiper = Swipe(document.querySelector('.swipe'), {
      auto: 3000,
      transitionEnd: function (index) {
        // index++;
        $('.cursor span').eq(index).addClass('active').siblings('.active').removeClass('active');
      }
    });

    // 上/下一张
    $('.swipe .arrow').on('click', function () {
      var _this = $(this);

      if (_this.is('.prev')) {
        swiper.prev();
      } else if (_this.is('.next')) {
        swiper.next();
      }
    })
  </script>

  <!-- 轮播图数据展示 -->
  <script type='text/html' id='img-box'>

    {{each  arr}}
    <li>
      <a href="#">
        <img src="{{$value.image}}">
        <span>XIU主题演示</span>
      </a>
    </li>
    {{/each}}
    </script>

  <!-- 热门推荐 -->
  <script type='text/html' id='hot-box'>

  {{each  hotArr}}
      <li>
        <a href="javascript:;">
          <img src="{{$value.thumbnail}}" alt="">
          <span>{{$value.title}}</span>
        </a>
      </li>
  {{/each}}
  </script>


  <!-- 获取最新的发布数据 -->
  <script type='text/html' id='lasted-box'>
    <h3>最新发布</h3>
  {{each  lastedArr}}
  <div class="entry">
    <div class="head">
      <span class="sort">{{$value.category.title}}</span>
      <a href="javascript:;">{{$value.title}}</a>
    </div>
    <div class="main">
      <p class="info">{{$value.author==null?'匿名用户':$value.author}} 发表于 {{$value.createAt}}</p>
      <p class="brief">
        星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯，星球大战:原力觉醒：《星球大战:原力觉醒》中国首映盛典红毯
      </p>
      <p class="extra">
        <span class="reading">阅读({{$value.meta.views}})</span>
        <span class="comment">评论({{$value.meta.comments}})</span>
        <a href="javascript:;" class="like">
          <i class="fa fa-thumbs-up"></i>
          <span>赞({{$value.meta.likes}})</span>
        </a>
        <a href="javascript:;" class="tags">
          分类：<span>{{$value.category.title}}</span>
        </a>
      </p>
      <a href="javascript:;" class="thumb">
        <img src="{{$value.thumbnail}}" alt="">
      </a>
    </div>
  </div>
  {{/each}}
  </script>


  <!-- 随机推荐 -->
  <script type='text/html' id='random-box'>

      {{each  randomArr}}
      <li>
        <a href="javascript:;">
          <p class="title">{{$value.content}}</p>
          <p class="reading">阅读({{$value.meta.views}})</p>
          <div class="pic">
            <img src="{{$value.thumbnail}}" alt="">
          </div>
        </a>
      </li>
     
      {{/each}}
      </script>

  <!-- 左侧分类数据展示 -->
  <script type='text/html' id='cate-box'>

        {{each  cateArr}}
        <li><a href="list.html?id={{$value._id}}"><i class="fa {{$value.className}}"></i>{{$value.title}}</a></li>
       
        {{/each}}
        </script>



  <script src='./index.js'></script>
  <script>NProgress.done()</script>
</body>

</html>